<script setup>
  import { ref } from 'vue'
  import config from '../data.js'
  const list = ref(config.list)
  const curIndex = ref(0)
  const toNav = (index) => {
    curIndex.value = index
  }
</script>


<template>
  <div class="tool_wrap">
    <div class="tool_content">
      <div class="t_content_nav">
        <dl>
          <dd class="t_nav_dd" v-for="(nav, navindex) in list" :key="navindex" :id="navindex"
            :class="{t_nav_dd_active : navindex == curIndex }">
            <a class="t_nav_dd_a" :href="`#${nav.id}`" @click="toNav(navindex)">{{ nav.name }}</a>
          </dd>
        </dl>
      </div>
      <div class="t_content_box">
        <div class="t_box_item" v-for="(tool, index) in list" :key="index">
          <div class="t_box_item_anchor" :id="tool.id" ></div>
          <div class="t_box_item_header">{{ tool.name }}</div>
          <a class="t_box_item_a" target="_blank" v-for="link in tool.collection" :key="link.link" :href="link.link">
            <img class="t_box_item_a_img" :data-src="link.icon" alt="" :src="link.icon" />
            <span class="t_box_item_a_name">{{ link.name }}</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.tool_wrap {
  margin: 0;
  width: 100%;
  max-width: 100%;
  /* background: #f5f5f5; */
  padding-top: 20px;
  padding-bottom: 20px;
}
.tool_content {
  margin: 0 auto;
  position: relative;
  max-width: 1300px;
}
.t_content_nav {
  position: fixed;
  width: fit-content;
  height: fit-content;
  max-height: calc(100% - 110px);
  padding: 8px 0;
  box-sizing: border-box;
  transition: all 0.2s linear;
  overflow: auto;
}
.t_nav_dd {
  margin: 0;
  padding: 6px 0;
  letter-spacing: 0.5px;
}
.t_nav_dd:hover {
  /* background: #ff5a00; */
  border-radius: 3px;
}
.t_nav_dd_active {
  color: #ff5a00;
  background: transparent !important;
}
.t_nav_dd_a {
  font-size: 14px;
  padding: 2px 4px;
}




.t_content_box {
  width: 1080px;
  margin: 0 auto;
}
.t_box_item {
  position: relative;
  width: 100%;
  min-height: 166px;
  padding: 42px 48px 10px 48px;
  border-radius: 8px;
  display: flex;
  align-content: flex-start;
  flex-wrap: wrap;
  margin-bottom: 20px;
  border: 1px solid gray;
  /* background-color: #ffffff; */
}
.t_box_item_anchor {
  position: absolute;
  left: 0;
  top: 60px;
  opacity: 0;
}
.t_box_item_header {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  line-height: 42px;
  font-size: 15px;
  padding-left: 46px;
  font-weight: 600;
  flex-shrink: 0;
  border-bottom: 0.5px solid rgba(0, 0, 0, .07);
}
.t_box_item_a {
  width: 164px;
  height: 42px;
  line-height: 42px;
  cursor: pointer;
  display: flex;
  flex-shrink: 0;
  align-items: center;
}
.t_box_item_a_img {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}
.t_box_item_a_name {
  font-size: 14px;
  /* color: #222222; */
}

@media (max-width: 480px) {
  .t_content_nav {
    display: none;
  }
  .t_content_box {
    width: unset;
  }
  .t_box_item {
    padding: 58px 16px 16px 16px;
  }
  .t_box_item_header {
    padding: 0 16px;
  }
  .t_box_item_a {
    width: 140px;
  }
}
</style>
